<template>
  <div class="first">
    <img :src="playlists.creator.backgroundUrl" alt="" class="img2" v-if="playlists.creator"/>
    <div class="fanghui">
      <svg class="icon" aria-hidden="true" @click="go">
        <use xlink:href="#icon-fanhui1"></use>
      </svg>
    </div>
    <div class="music"><span>歌单</span></div>
    <div class="sousuo">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
    <div class="liebiao">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao"></use>
      </svg>
    </div>
  </div>
  <div class="second">
    <div>
      <img :src="playlists.coverImgUrl" alt="" class="img1" />
    </div>
    <div class="second_2">
      <span class="name">{{ playlists.name }}</span>
      <div style="display: flex; margin-top: 10px">
        <img :src="playlists.creator.avatarUrl" alt="" class="avator" v-if="playlists.creator"/>
        <span style="color:#d8e6f2;font-size:0.2rem;margin-left: 10px;" v-if="playlists.creator">{{playlists.creator.nickname }}</span>
      </div>
      <div class="description">{{ playlists.description }}</div>
      <span style="color: #d8e6f2">></span>
    </div>
  </div>
  <div class="third">
    <div class="third_2">
      <svg
        class="icon"
        aria-hidden="true"
        style="fill:#d8e6f2;"
      >
     <use xlink:href="#icon-xinxi"></use>
      </svg>
      <span>{{playlists.commentCount}}</span>
    </div>
    <div class="third_2">
      <svg
        class="icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-fenxiang"></use>
      </svg>
      <span>{{playlists.shareCount}}</span>
    </div>
    <div class="third_2">
      <svg
        class="icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
      </svg>
      <span>下载</span>
    </div>
    <div class="third_2">
      <svg
        class="icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-xuanze-duoxuan-tianchong"></use>
      </svg>
      <span>多选</span>
    </div>
  </div>
</template>
<script>
// import {getMusicgequ} from '@/request/api/music'
export default {
  // props:{
  //   playlists:Object
  // },
  props: ["playlists"],
  data() {
    return {
      // avator:{},
      nickname:'',
      //   coverImgUrl:{},
      backgroundUrl:'',
    };
  },
  computed: {},
  methods: {
    //    async getMusic(){
    //  let res=await getMusicgequ(this.$route.query.id)
    //  let playlist=res.data.playlist
    //  sessionStorage.setItem('playlist',JSON.stringify(playlist))
    //  this.playlists=JSON.parse(sessionStorage.getItem('playlist'))
    //  console.log(res)
    go(){
      this.$router.go(-1)

    }
  },
  mounted() {
    // this.playlists=this.playlist
    // let res=sessionStorage.getItem('playlist')
    //   this.playlists=JSON.parse(res)
    // console.log(this.playlists.creator.avatarUrl)
  },
  // beforeCreate()
  // {

  // },
  created() {
    // this.avator=this.playlists.creator.avatarUrl,
    // this.nickname =this.playlists.creator.nickname,
      // this.coverImgUrl=this.playlists.coverImgUrl
      // this.backgroundUrl = this.playlists.creator.backgroundUrl;
    // this.playlists=this.playlist
  },
};
</script>
<style lang="less" scoped>
.first {
  display: flex;
  flex-direction: row;
  position: relative;
  .fanghui {
    margin-left: 10px;
  }
  .music {
    margin-left: 0.5rem;
    color: #d8e6f2;
  }
  .sousuo {
    margin-left: 200px;
  }
  .liebiao {
    margin-left: 0.4rem;
  }
}
.img2 {
  width: 100%;
  height: 6rem;
  position: fixed; //固定定位
  z-index: -1; //显示设置层级
  filter: blur(30px); //背景虚化
}
.second {
  margin-top: 0.4rem;
  display: flex;
  margin-left: 0.3rem;
  .img1 {
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
  }
  .second_2 {
    display: flex;
    flex-direction: column;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    .name {
      font-size: 15px;
      color: #d8e6f2;
      font-weight: 1000;
    }
    .description {
      font-size: 10px;
      color: #d8e6f2;
      width: 190px;
      height: 0.68rem;
      overflow: hidden;
      margin-top: 0.2rem;
    }
    .avator {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}
.third{
   display: flex;
   justify-content: space-around;
   margin-top: .4rem;
   align-items: center;
   .third_2{
      display: flex;
      flex-direction: column; 
      align-items: center;
   }
   .third_2 span{
      color: #d8e6f2;
   }
}
</style>
